<template>
  <div class="departments">
    <div class="tab">
      <el-tabs v-model="activeName">
        <el-tab-pane
          label="组织结构"
          name="first"
          class="mypane"
          :treeList="topTree"
        >
          <el-row class="myrow">
            <el-col :span="20">
              <i class="el-icon-s-home myicon" style="font-size:20px"></i>
              江苏传智博客教育科技股份有限公司
            </el-col>
            <el-col :span="2">
              <span>负责人</span>
            </el-col>
            <el-col :span="2">
              <el-dropdown>
                <span class="el-dropdown-link mydrodown">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="myDropdownMenu">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <hr />
          <el-tree :data="treeList" :props="defaultProps" default-expand-all>
            <template slot-scope="{ data }">
              <treetools
                :item="data"
                class="custom-tree-node"
                @refreshdata="getAllDepart"
                @showDialog="toggleShowDialog"
                @getDepartments="getDepartments"
              >
                <span>{{ data.name }}</span>
              </treetools>
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template
      ><addDepartments
        :showDialog.sync="showDialog"
        :curren="target"
        :allList="allList"
        @refreshdata="getAllDepart"
        ref="editDepar"
      ></addDepartments
    ></template>
  </div>
</template>

<script>
import { getTreeList, getDepartmentsApi } from '../../api/departments'
import treetools from './components/tree-tool.vue'
import addDepartments from './components/add-departments.vue'
export default {
  components: {
    treetools,
    addDepartments
  },
  data () {
    return {
      activeName: 'first',
      topTree: { isTop: true },
      treeList: [],
      allList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showDialog: false,
      curren: {}
    }
  },
  created () {
    this.getAllDepart()
  },
  methods: {
    async getAllDepart () {
      const res = await getTreeList()
      this.topTree = { ...this.topTree, ...res.depts[0] }
      this.allList = res.depts
      const newList = this.allList.filter(value => {
        return value.pid === ''
      })
      newList.map(value => {
        const children = []
        this.allList.forEach(values => {
          if (value.id === values.pid) {
            children.push(values)
          }
          value.children = children
        })
        return value
      })
      this.treeList = newList
    },
    toggleShowDialog () {
      this.showDialog = true
    },
    target (curren) {
      this.curren = curren
    },
    async getDepartments (id) {
      this.toggleShowDialog()
      const res = await getDepartmentsApi(id)
      this.$refs.editDepar.editDepartments(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px 20px;
  .tab {
    padding: 40px 60px;
    background-color: #fff;
    .mypane {
      .custom-tree-node {
        width: 100% !important;
      }
      padding: 40px 70px;
      .myicon {
        margin-right: 4px;
      }
      .mydrodown {
        font-size: 16px;
      }
    }
  }
}
</style>
